<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形圆角作业</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        canvas{
            display: block;
            margin:0 auto;
            border:1px red solid;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");

        ctx.moveTo(150, 100);
        ctx.lineTo(350, 100);
        ctx.arcTo(400, 100, 400, 150, 50);
        ctx.lineTo(400, 200);
        ctx.arcTo(400, 250, 350, 250, 50);
        ctx.lineTo(150, 250);
        ctx.arcTo(100, 250, 100, 150, 50);
        ctx.lineTo(100, 150);
        ctx.arcTo(100, 100, 150, 100, 50);
        ctx.stroke();
    </script>
</body>
</html>